<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
					v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData"
			:collection="collection" @load="load" :field="field" orderby="date desc" :where="dbWhere">
			<uni-list-item direction="column" v-for="item in data" :key="item.id" :show-badge='false'
				:to="'/pages/activities/detail?id='+item._id">
				<!-- 通过header插槽定义列表顶部显示为图片 -->
				<template v-slot:header>
					<view class="uni-thumb uni-content list-picture">
						<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
						<image :src="item.imgPath[0]" mode="heightFix"></image>
					</view>
					<view class="uni-title">{{item.title}}</view>
					<view class="desc">
						<text class="basis-sm text-grey justify-start">{{item.date}}</text>
						<text class='basis-xs text-grey iconfont'>&#xe629; :{{item.scores}}</text>
						<!-- <text class="basis-xs text-grey justify-start"> {{item.scores}}</text> -->
						<text class="basis-sm text-grey justify-end">发起人: {{item.creator}}</text>
					</view>
				</template>
			</uni-list-item>
			<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
		</unicloud-db>

	</view>
</template>

<script>
	const app = getApp();
	const db = uniCloud.database();
	const _ = db.command;


	export default {
		data() {
			return {
				TabCur: 0,
				tabList: ['报名中', '全部'],
				collection: 'activities',
				field: 'title, scores, date, creator, imgPath, members',
				formData: {
					status: 'loading', // 加载状态
				},
				uid: null,
				dbWhere: 'date >= "2021-05-12" && $env.uid in members',
				activities_data: null,
				limit: 10
			}
		},
		methods: {
			onLoad() {
				if (!app.globalData.hasLogin) {
					uni.showModal({
						title: "请先登录",
						mask: true,
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: "/pages/profile/profile"
								})
							} else {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					});
				}
				this.uid = app.globalData.userInfo._id;
				var today = new Date();
				today = today.toISOString().slice(0,10);
				this.dbWhere = 'date >= "'+today+'" && $env.uid in members'
			},

			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				if (this.TabCur == 0) {
					var today = new Date();
					today = today.toISOString().slice(0,10);
					this.dbWhere = 'date >= "'+today+'" && $env.uid in members'
				} else if (this.TabCur == 1) {
					this.dbWhere = '$env.uid in members'
				}
				uni.showLoading({
					title: '加载ing'
				})
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.load();
			},
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				this.tipShow = true
				this.formData.status = 'more'
				this.$refs.udb.loadData({
					clear: true
				}, () => {
					this.tipShow = false
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * 上拉加载回调函数
			 */
			onReachBottom() {

				this.$refs.udb.loadMore()
			},
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
				uni.hideLoading();
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.list-picture {
		border-radius: 20rpx;
		width: 100%;
		height: 180px;
	}

	.desc {
		display: flex;
		justify-content: flex-start;
		width: 95%;
	}

	.bg-white {
		background-color: #ffffff;
		color: #666666;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}
</style>
